<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
		<meta charset="UTF-8">
		<title>预定会场</title>
		<script type="text/javascript" src="../js/flexible.js"></script>
		<link rel="stylesheet" href="../css/all_page.css" />
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/mobiscroll.css" />
		<link rel="stylesheet" href="../css/mobiscroll_002.css" />
		<link rel="stylesheet" href="../css/mobiscroll_003.css" />
		<style>
			
		</style>
	</head>

	<body>

		<div class="predetermine">
			<!--头部-->
			<div class="pTop">
				<label>时间：</label>
				<div class="input">
					<input value="2018-06-25" class="" readonly="readonly" name="appDate" id="appDate" type="text">
					<p id="appDateText">06-25<span>周一</span></p>
				</div> <span>-</span>
				<div class="input">
					<input value="" class="" readonly="readonly" name="appDate" id="amOrpm" type="text">
					<p id="amOrpmText">请选择</p>
				</div>
				<ul id="sex-list" style="display: none">
					<li>上午</li>
					<li>下午</li>
				</ul>
			</div>
			
			<!--会场-->
			<div class="mPlace">
				<div class="mTop">
					<p>海珠会议文化中心</p>
					<p class="change">切换场所</p>
				</div>
				<div class="mSubTil">
					<div>首层566人，第二层264人，会标尺寸：12M*1.4M，共 10个会议咪，4个无线咪，6个腰包咪，容纳人数:    830人</div>	
				</div>
			</div>
			
			<!--填写信息-->
			<div class="pInfo">
				<div class="type div_float">
					<div>
						<label>彩排</label>
						<input type="radio" name="sType"  />
					</div>
					<div>
						<label>会议</label>
						<input type="radio" name="sType" />
					</div>
					<div>
						<label>演出</label>
						<input type="radio" name="sType"  />
					</div>
					<div>
						<label>布场</label>
						<input type="radio" name="sType" />
					</div>
				</div>
				<div class="Cn">
					<div class="l">
					 	<span></span><label>会议主题：</label>
					 	<input type="text" />
					</div>
					<div class="l">
					 	<span></span><label>会议人数：</label>
					 	<input type="text" />
					</div>
					<div class="time div_float">
						<div class="s"><span class="sj"></span><label>会议时间：</label></div>
						<div class="timeText"><span id="sTimeText">14:00</span><input type="text"  id="sTime"/></div><span>至</span>
						<div class="timeText"><span id="eTimeText">16:00</span><input type="text" id="eTime"/></div>
					</div>
					<div class="time div_float">
						<div class="m">
							<span class="bm"></span><label>预定部门：</label>
							<input type="text" placeholder="后勤部" />
						</div>
						<div class="m lx">
							<span class="lxr"></span><label>联系人：</label>
							<input type="text" placeholder="苏生"/>
						</div>
					</div>
					<div class="l">
					 	<span class="lxdh"></span><label>联系电话：</label>
					 	<input type="text" placeholder="请输入手机号"/>
					</div>
					<div class="l remark">
					 	<span class="bz"></span><label>备注：</label>
					 	<textarea placeholder="超时要求：******    其他要求: ******"></textarea>
					</div>
				</div>
				<div class="btm div_float">
					<div>
						<label>是否纯净水</label>
						<input type="checkbox" />
					</div>
					<div>
						<label>是否纯净水</label>
						<input type="checkbox" />
					</div>
				</div>
				<div class="layer">
					<input type="checkbox" />
					<label class="lookRule">同意会议室使用管理制度</label>
					<div class="pLayer divHide">
						<div class="sub">
							<span class="close">×</span>
							<div>管理制度</div>
						</div>
					</div>
				</div>
				<div class="yuding">
					<p>立即预定</p>
					<p>我的预定</p>
				</div>
			</div>
			
			<!--公共底部-->
			<div class="allFooter div_float">
				<a>
					<img src="../img/home_sel.png" />
					<p>首页</p>
				</a>
				<a class="w_info">
					<img src="../img/info.png" />
					<p>微信息</p>
				</a>
				<a class="work">
					<img src="../img/allAP.png" />
					<p>工作台</p>
				</a>
				<a class="w_service">
					<img src="../img/service.png" />
					<p>微服务</p>
				</a>
				<a>
					<img src="../img/me.png" />
					<p>个人中心</p>
				</a>

			</div>
			<div class="allFootText">
				<div class="layer wx">
					<a>通知公告</a>
					<a>工作动态</a>
					<a>失物招领中心</a>
				</div>
				<div class="layer wf">
					<a>故障报修</a>
					<a>预约会场</a>
					<a>食堂充值</a>
					<a>办公用品</a>
					<a>留言诉求</a>
					<a>评价系统</a>
				</div>
			</div>
			
		</div>

	</body>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/mobiscroll.custom-2.5.2.min.js"></script>
	<script type="text/javascript" src="../js/mobiscroll_003.js" ></script>
	<script type="text/javascript" src="../js/js.js" ></script>
	<script>
		$(function() {

			$("#appDate").mobiscroll().date({
				theme: "android-ics",
				lang: "zh",
				display: 'bottom',
				selectType: 'week',
				dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式
				//wheels:[], //设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现
				//onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
				headerText: function(valueText) { //自定义弹出框头部格式
					array = valueText.split('-');
					return array[0] + "年" + array[1] + "月" + array[2] + "日";
				},
				onSelect: function(valueText, inst) {
					var showDay = valueText.split('-');
					var mydate=new Date(valueText);
					var myddy=mydate.getDay();//获取存储当前日期
					var weekday=["周日","周一","周二","周三","周四","周五","周六"];
					$("#appDateText").html(showDay[1]+'-'+showDay[2]+'<span>'+weekday[myddy]+'</span>');
				}
			});

			$("#amOrpm").click(function() {
				var that = this;
				$("#sex-list").mobiscroll().treelist({
					theme: "android-ics",
					lang: "zh",
					display: 'bottom',
					headerText: '请您选择',
					onSelect: function(valueText) {
						var m = $(this).find("li").eq(valueText).html();
						$(that).val(m);
						$('#amOrpmText').html(m)
					}
				});
				$("input[id^=sex-list]").focus();
			});


			$("#sTime").mobiscroll().time({ 
		        theme: "android-ics",
		        display: 'bottom',
		        lang: "zh",
		        onSelect: function(valueText) {
					console.log(valueText)
					$('#sTimeText').text(valueText)
				}
		    });
		    
		    $("#eTime").mobiscroll().time({ 
		        theme: "android-ics",
		        display: 'bottom',
		        lang: "zh",
		        onSelect: function(valueText) {
					console.log(valueText)
					$('#eTimeText').text(valueText)
				}
		    });
		    
		    $('.lookRule').on('click',function(){
		    	$('.pLayer').removeClass('divHide');
		    });
		    $('.pLayer .close').on('click',function(){
		    	$('.pLayer').addClass('divHide');
		    })
		    
		});
	</script>

</html>